<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>props传参</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <text-component title="props传参"></text-component>

    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
  </div>

</body>

<!--  props可以传递无数参数且类型不限 -->


<script type="text/javascript">
  Vue.config.productionTip = false;

  Vue.component("text-component", {
    props: ['title'],
    template: '<div><h1>{{title}}</h1></div>',
  })

  Vue.component("blog-post", {
    props: ['post'],
    template: '<div><h1>{{post.title}}</h1></div>',
  })

  new Vue({
    el: '#root',
    data: {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    },
    methods: {}
  })
</script>

</html>